<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-features</title>
</head>
<body>
  <!-- 通过给 script 添加 type=module 的属性，就可以以 ES Modules 的标准执行其中的 JS代码了 -->
  <script type="module">
    // 这段代码正常执行
    console.log('this is es module')
  </script>

  <!-- 1. ESM 自动采用严格模式，忽略 `use strick` 文件头 -->
  <script type="module">
    // 内部全部采用严格模式，忽略自添加的`use strick`

    // 1. 严格模式下 this 默认不指向全局对象（window）
    console.log(this) // undefined
    // 2. 严格模式不允许使用未声明的变量，以下报错 a is not defined
    // a = 1
  </script>

  <!-- 2. 每个ES Module 都是运行在单独的私有作用域中 -->
  <script type="module">
    var foo = 100
  </script>
  <script type="module">
    console.log(foo) // foo is not defined
  </script>

  <!-- 3.ESM 是通过 CORS 方式请求外部 JS 模块的 -->
  <!-- 百度CDN地址不支持CORS 加载失败，跨域报错 -->
  <!-- <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
  <!-- unpkg CDN的地址支持CORS 加载成功 -->
  <script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>

  <!-- 4. ESM 的 `<script>` 标签会延迟执行脚本 -->
  <!-- 正常情况，alert会阻塞页面展示p标签内容 -->
  <!-- <script>
    alert('阻塞文档加载')
  </script> -->
  <script type="module">
    alert('延迟执行脚本，不阻塞文档加载')
  </script>
  <p>显示内容</p>
</body>
</html>